<template>
  <div id="control-panel" style="position: absolute; top: 10px; left: 10px; background: white; padding: 10px; z-index: 1000;">
    <h3>控制面板</h3>
    <div v-if="selectedUAV">
      <p>当前控制对象: {{ selectedUAV }}</p>
      <button @click="clearTrajectory">清除轨迹</button>
      <button @click="pauseTracking">暂停记录</button>
      <button @click="resumeTracking">继续记录</button>
    </div>
    <select v-model="selectedUAV">
      <option disabled value="">选择无人机</option>
      <option v-for="(uav, id) in uavs" :key="id" :value="id">{{ id }}</option>
    </select>
  </div>
</template>

<script>
import { useUAVStore } from '../store'
import { computed, ref } from 'vue'

export default {
  setup() {
    const store = useUAVStore()
    const selectedUAV = ref('')
    const uavs = computed(() => store.uavs)

    const clearTrajectory = () => {
      store.clearTrajectory(selectedUAV.value)
    }

    const pauseTracking = () => {
      store.pauseTracking(selectedUAV.value)
    }

    const resumeTracking = () => {
      store.resumeTracking(selectedUAV.value)
    }

    return { selectedUAV, uavs, clearTrajectory, pauseTracking, resumeTracking }
  }
}
</script>